<script setup>
    import axios from 'axios';
    import { onMounted, ref } from 'vue';
    import WordCard from './WordCard.vue';
    
    const queryWord = ref("");
    const wordList = ref([]);
    const rowCount = ref(5);
    const offset = ref(0);
    const wordCardWrapper = ref(null);
    const isLoading = ref(false);
    const noMoreData = ref(false);

    function getRecordWord(){
        if(isLoading.value || noMoreData.value){
            return;
        }
        isLoading.value = true;
        axios.post('http://127.0.0.1:5001/getRecordWord',{
            rowCount : rowCount.value,
            offset : offset.value,
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {
            if(response.data.success == 'true'){
                if(response.data.wordList.length == 0){
                    noMoreData.value = true;
                }else{
                    wordList.value = wordList.value.concat(response.data.wordList);
                    offset.value += rowCount.value;
                }
                isLoading.value = false;
            }
            // console.log(resSearch);
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    function getRecordWordByWord(){
        axios.post('http://127.0.0.1:5001/getRecordWordByWord',{
            queryWord : queryWord.value
        },{
            headers:{
               'Content-Type':'application/x-www-form-urlencoded'
            }
        })
        .then(function (response) {
            if(response.data.success == 'true'){
                wordList.value = response.data.wordList;
                noMoreData.value = true;
            }
            // console.log(resSearch);
        })
        .catch(function (error) {
            console.log(error);
        });
    }

    onMounted(()=>{
        getRecordWord();
    });


    function handleScroll(){
        // console.log(scrollableDiv);
        const {scrollTop, scrollHeight, clientHeight} = wordCardWrapper.value;
        if(scrollTop + clientHeight >= scrollHeight * 0.95) {
            getRecordWord();
        }
    }
    
</script>

<template>
    <div >
        <input class="queryinput neon-input" v-model="queryWord">
        <button class="searchbtn neon-btn" @click="getRecordWordByWord">
            <font-awesome-icon icon="fa-solid fa-search" class="text-sm" />
            <span>搜索</span>
        </button>
        <div ref="wordCardWrapper" @scroll="handleScroll" class="word-card-wrapper">
            <WordCard class="" v-for="(word,index) in wordList" :key="index" :button-type="1" :word-info="{word:word[0],dst:word[1],wordId:word[2]}"></WordCard>
        </div>
        
    </div>
</template>

<style scoped>
    .queryinput {
        width: 80%;
        border-radius: 15px 0px 0px 15px;
        margin-right: 1%;
    }
    .searchbtn {
        width: 15%;
        border-radius: 0px 15px 15px 0px;
    }

    .word-card-wrapper {
        height: 850px; 
        overflow-y: auto;
    }

    /* .wordcard {
        width: 100%;
    } */

</style>